<template>
  <div class="chat-container">
    <div style="width: 100%;">
      <van-icon
          style="position:fixed;top: 20px;left: 20px;cursor: pointer;border-radius: 50%"
          name="arrow-left" color="black"
          size="30px" @click="back"/>
    </div>


    <!-- 消息展示区域 -->
    <div class="messages" ref="messagesContainer">
      <div
          v-for="(message, index) in messages"
          :key="index"
          :class="['message', message.sender]">
        <div class="bubble">
          {{ message.content }}
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area">
      <input
          v-model="inputMessage"
          @keyup.enter="sendMessage"
          placeholder="输入消息..."
      />
      <button @click="sendMessage">发送</button>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {

      inputMessage: '',
      messages: [
        { sender: 'bot', content: '你好！有什么可以帮你的？' }
      ]

    };
  },
  methods: {
    back() {
      this.$router.push("/my")
    },

    sendMessage() {
      if (!this.inputMessage.trim()) return

      // 添加用户消息
      this.messages.push({
        sender: 'user',
        content: this.inputMessage
      })

      // 添加一个初始空白的AI消息
      const botMessage = { sender: 'bot', content: '' }
      this.messages.push(botMessage)
      const botMessageIndex = this.messages.length - 1 // 记录当前AI消息的位置

      // 使用 EventSource 接收 SSE 数据
      const eventSource = new EventSource(
          `http://localhost:10086/api/user/streamAssistant/stream?message=${encodeURIComponent(this.inputMessage)}`
      );

      eventSource.onmessage = (event) => {
        // 将流式数据追加到当前AI消息
        this.messages[botMessageIndex].content += event.data
        // 强制更新视图（Vue2需要$set）
        this.$set(this.messages, botMessageIndex, {...this.messages[botMessageIndex]})
        this.scrollToBottom()
      };

      eventSource.onerror = () => {
        console.error("SSE connection error"); // 打印错误日志
        // 关闭连接
        eventSource.close();
        this.messages[botMessageIndex].content += '\n（对话结束）'
        this.scrollToBottom();
      };

      this.inputMessage = '';
      this.scrollToBottom();
    },

    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.messagesContainer
        container.scrollTop = container.scrollHeight
      })
    }

  }
}
</script>

<style>

.chat-container {
  max-width: 600px;
  margin: 50px auto; /* 添加顶部间距 */
  height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f5f5;
}

.message {
  display: flex;
  margin: 10px 0;
}

.message.user {
  justify-content: flex-end;
}

.bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 15px;
  background-color: #fff;
}

.message.user .bubble {
  background-color: #0084ff;
  color: white;
}

.message.bot .bubble {
  background-color: #e0e0e0;
}

.input-area {
  padding: 15px;
  background-color: white;
  display: flex;
  gap: 10px;
  border-top: 1px solid #ddd;
}

input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 15px;
  background-color: #0084ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0073e6;
}


</style>